﻿@page
@inherits Acesoft.Web.UI.RazorPages.WebPageBase
@inject IConfigService ConfigService
@{
    Layout = "_shared/site";
    ViewData["Title"] = "找回密码";
    Ace.RenderAuthOptions = true;

    var cfg = ConfigService.GetConfig(1);
    var type = Guid.NewGuid().ToString("N");
}
<div style="height:440px;padding-top:40px;background-image:url(/images/rbg.jpg);background-position:center">
    <div style="margin:0 auto;width:630px;padding:30px 15px;background:#fff;opacity:0.90">
        <div class="ph15 pb10">
            <h3 style="color:#08c">找回密码</h3>
        </div>        
        @{
            Ace.Form().Id("view").Css("front")
            .Ajax(ds => ds.DataSource("rbac.regist").HttpPost("auth", "postpwd"))
            .Events(e => e.OnSuccess("onSuccess")).Content(
                @<div class="container-fluid">
                    <div class="row">
                        <div class="col-md-2">手机号码</div>
                        <div class="col-md-6">
                            @Ace.TextBox().Name("mobile").Required().ValidType("length[11,11]").Prompt("11位手机号码").Width("100%")
                        </div>
                        <div class="col-md-4"><span class="text-warning">每个手机号码注册一次</span></div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">图片验证码</div>
                        <div class="col-md-6">
                            @Ace.TextBox().Id("code").Required().ValidType("length[5,5]").Prompt("5位验证码").Width("32%").TipPosition(Position.bottom)
                            <img id="vimg" src="/api/draw/getvalidimage?type=@type" onclick="onRefresh(this)" class="hand" />
                            @Ace.LinkButton().Name("btnc").Text("发送验证码").Width(100).Events(e => e.OnClick("onCode"))
                        </div>
                        <div class="col-md-4"><span class="text-warning">请输入图片验证码</span></div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">短信验证码</div>
                        <div class="col-md-6">
                            @Ace.TextBox().Name("valid_code").Required().ValidType("length[6,6]").Prompt("6位短信验证码").Width("100%")
                        </div>
                        <div class="col-md-4"><span class="text-warning">短信验证码有效期为15分钟</span></div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">登录密码</div>
                        <div class="col-md-6">
                            @Ace.PasswordBox().Name("pwd").Required().Prompt("请输入4-20位新密码").ValidType("length[4,20]").Width("100%")
                        </div>
                        <div class="col-md-4"><span class="text-warning">密码区分大小写</span></div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">确认密码</div>
                        <div class="col-md-6">
                            @Ace.PasswordBox().Id("pwd2").Required().ValidType("equals['#pwd']").Prompt("请再次输入密码").Width("100%")
                        </div>
                        <div class="col-md-4"><span class="text-warning">请牢记您的密码</span></div>
                    </div>
                    <div class="row" style="padding-top:20px">
                        <div class="col-md-2">
                        </div>
                        <div class="col-md-6"><a class="btn btn-primary" style="width:100%" onclick="AX.formSubmit('#view')">提 交</a></div>
                        <div class="col-md-4"></div>
                    </div>
                </div>
            ).Render();
        }
    </div>
</div>
<script>
    function onRefresh(ele) {
        $(ele).attr('src', AX.opts.root + 'api/draw/getvalidimage?type=@(type)&d=' + Math.random());
    }
    function onSuccess() {
        $.messager.alert('提示', '<h4 class="cr">找回成功！</h4><h5>请返回登录页面进行登录！</h5>', 'info', function () {
            AX.login();
        });
    }
    var count = 60, sb = false;
    function getCode() {
        $("#btnc").find('.l-btn-text').text("重新发送(" + count + ")")
        count--;
        if (count > 0) {
            setTimeout(getCode, 1000);
        }
        else {
            $("#btnc").find('.l-btn-text').text("获取验证码");
            $("#btnc").linkbutton("enable");
        }
    }
    function onCode() {
        var mobile = $('#mobile').val();
        if (mobile.length != 11) {
            $.messager.error({ msg: '请输入有效的手机号！' });
            $('#mobile').next().find('input').focus();
            return;
        }
        var vcode = $('#code').val();
        if (vcode.length != 5) {
            $.messager.error({ msg: '请输入图片验证码！' });
            $('#code').next().find('input').focus();
            return;
        }
        if ($('#mobile').textbox('isValid')) {
            $("#btnc").linkbutton("disable");
            $("#btnc").find('.l-btn-text').text("正在发送…");
            AX.ajax({
                url: AX.api({ api: 'cloud/getsms', ds: 'rbac.backpwd' }),
                data: { type: '@type', mobile: $('#mobile').val(), code: $('#code').val() },
                type: 'get',
                error: function (xhr) {
                    AX.ajaxerror(xhr);
                    onRefresh($('#vimg').get(0));
                    count = 5;
                    getCode();
                },
                cb: function () {
                    $('#valid_code').next().find('input').focus();
                    $.messager.info({ msg: '发送成功，请注意查收，15分钟内提交有效！' });
                    onRefresh($('#vimg').get(0));
                    count = 60;
                    getCode();
                }
            });
        } else {
            $('#mobile').next().find('input').focus();
        }
    }
</script>